/**
 * 虽然当代浏览器在渲染dom的时候，遇到img并不会阻碍dom树的渲染，（浏览器会开辟http线程请求图片资源文件），但是在生成render tree后，
 * 浏览器进行渲染的时候，会把渲染树和图片一起进行渲染。性能问题：
 * 1、页面第一次加载速度，如果图片请求资源过度，同时开辟的http线程只有6个，这样图片预先加载会影响其他资源请求速度
 * 2、绘制图片影响打开速度
 */

/**
 * 基于盒模型，或者getBoundingClientRect，我们判断出是否加载图片，在滚动条滚动中随时进行判断处理，（节流）
 * 新方案：IntersectionObserver基于元素的监听，一体化解决懒加载问题
 */


let columns = Array.from(document.querySelectorAll('.column'))

function redner(title, height, pic) {
  let str = `<a href="#">
    <div class="lazyImageBox" style="height:${height}px">
      <img src="" alt="" data-image="${pic}"
    </div>
    <p>${title}</p>
  </a>
  `
  return str
}

function bindHTML(data) {
  data = data.map(item => {
    let {
      width,
      height
    } = item;
    item.height = height / (width / 230)
    item.width = 230
    return item
  })

  // 每三个为一组获取数据
  for(let i = 0; i < data.length; i+=3) {
    let group = data.slice(i, i + 3);
    // 实现每一列的降序
    columns.sort((a, b) => {
      return b.offsetHeight - a.offsetHeight
    })
    // 把一组的数据进行升序
    group.sort((a, b) => {
      return a.height - b.height
    })
    // 分别把最小的数据插入到最大的列中
    group.forEach((item, index) => {
      let {
        height,
        title,
        pic
      } = item;
      let card = document.createElement('div')
      card.className = "card"
      card.innerHTML = redner(title, height, pic)
      columns[index].appendChild(card)
    })
  }
}

// 实现图片的延迟加载
let lazyImageBoxs, observer = new IntersectionObserver(changes => {
  changes.forEach(item => {
    let {
      isIntersecting,
      target,
    } = item;
    if(isIntersecting) {
      lazyImg(target)
      observer.unobserve(target)
    }
  })
}, {
  threshold: [0.5]
});

function lazyFunc() {
  lazyImageBoxs = Array.from(document.querySelectorAll('.lazyImageBox'))
  lazyImageBoxs = lazyImageBoxs.filter(item => {
    return item.querySelector('img').getAttribute('data-image')
  })
  lazyImageBoxs.forEach(lazyImageBox => {
    observer.observe(lazyImageBox)
  })
}

function lazyImg(lazyImageBox) {
  let img = lazyImageBox.querySelector('img')
  let trueImg = img.getAttribute('data-image')
  img.src = trueImg
  img.onload = function () {
    utils.css(img, 'opacity', 1);
  }
  img.removeAttribute('data-image')
}

// 无限下拉加载
let bottomBox = document.querySelector('.bottomBox')
let isLoadMore = false
let observer2 = new IntersectionObserver(changes => {
  let isIntersecting = changes[0].isIntersecting;
  if(isIntersecting) {
    // 到达底部了
  }
}, {
  threshold: [0]
});
observer2.observe(bottomBox);